<template>
  <div>
    <a-input :value="aInput" @input="handleInput"></a-input>

    <br />
    <a-input v-model="aInput"></a-input>
    <a-show :content="aInput"></a-show>
    <p>aInput:{{aInput}}</p>
    <p>state.appName:{{ appName }} --> version: {{ appNameVersion }}</p>
    <button @click="handelChangeAppName">修改appName</button>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <button @click="handelGetAppName">获取appName</button>
    <p>state.userName:{{ userName }} --> lase one: {{ lastUserName }}</p>
    <button @click="handelSetVersion">设置version</button>
    <p>version: {{ version }}</p>
  </div>
</template>

<script>
import AInput from "_c/AInput";
import AShow from "_c/AShow";
import { mapState } from "vuex";

export default {
  name: "Store",
  components: {
    AInput,
    AShow,
  },
  data() {
    return {
      aInput: "",
    };
  },
  computed: {
    // ...mapState({
    //   appName: (state) => state.appName,
    //   userName: (state) => state.user.userName,
    // }),
    appNameVersion() {
      return this.$store.getters.appNameVersion;
    },
    lastUserName() {
      return this.$store.getters.lastUserName;
    },
    version() {
      return this.$store.state.version;
    },

    // ...mapState("user",{
    //   userName: (state) => state.userName,
    // })

    appName() {
      return this.$store.state.appName;
    },
    userName() {
      return this.$store.state.user.userName;
    },
  },
  methods: {
    handleInput(val) {
      this.aInput = val;
    },
    handelChangeAppName() {
      this.$store.commit("SET_APPNAME", {
        appName: "newAppName",
      });
    },
    handelSetVersion() {
      this.$store.commit("SET_APPVERSION", {
        key: "version",
        value: "1.0",
      });
    },
    handelGetAppName() {
      this.$store.dispatch("updateAppName");
    },
  },
};
</script>

<style>
</style>